import React from 'react'
import { Button, Input, Row, Col, Form } from 'antd'
import InputLanguage from 'components/template/input-language'

export default {
  key: 'input-language',
  name: 'InputLanguage 多语言输入',
  author: '张然',
  description: '老的太难用了，重写一个。',
  api: [
    {
      title: 'API',
      data: [{
        param: 'disabled', description: '是否禁用。', type: 'boolean', defaultValue: 'false'
      }, {
        param: 'placeholder', description: '组件没有选择值时显示的文字。', type: 'string', defaultValue: '请输入'
      }, {
        param: 'maxLength', description: '输入框最大输入字符数量，可设置不同语言下不同的数量。', type: 'number | array', defaultValue: '-'
      }, {
        param: 'value', description: '组件的值，为一个数组或者携带::i18n::数组的对象，该数组格式为::onChange::输出的第二个参数。', type: 'any', defaultValue: '-'
      }, {
        param: 'onChange', description: '组件值变化时的回调。', type: 'function(name, i18n)', defaultValue: '-'
      }],
      description: ''
    },
    {
      title: '当在表单中使用时提供了常用的校验规则。',
      data: [{
        param: 'InputLanguage.required', description: '必填', type: '-', defaultValue: '-'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '相比老的新的只有::value::和::onChange::两个需要关注的属性，同时::maxLength::与老::inpRule::一致。',
      state: {
      },
      getMethod: context => {
        return {
          onChange: value => {
            console.log(value);
          }
        }
      },
      getContent: context => {
        return (
          <div>
            <InputLanguage onChange={context.onChange}/>
            <br/>
            <InputLanguage onChange={context.onChange} placeholder='最多输入10个字符' maxLength={10}/>
            <br/>
            <InputLanguage onChange={context.onChange} placeholder='禁用' disabled/>
            <br/>
            <InputLanguage
              onChange={context.onChange}
              textArea
              extraProps={{
                rows: 3
              }}
            />
          </div>
        )
      }
    },
    {
      title: '默认值',
      description: '默认值为一个携带::i18n::数组与::name::的对象，该格式为::onChange::输出的第二个参数。',
      state: {
        name: '中文字段',
        i18n: [{
          language: 'zh_cn',
          value: '中文字段'
        }, {
          language: 'en',
          value: 'English value'
        }, {
          language: 'ja',
          value: '日本語フィールド'
        }, {
          language: 'zh_TW',
          value: '正體字'
        }, {
          language: 'it_IT',
          value: 'Italiano'
        }]
      },
      getMethod: context => {
        return {
          onChange: value => {
            console.log(value);
            context.setState({ i18n: value.i18n, name: value.name })
          }
        }
      },
      getContent: context => {
        const { name, i18n } = context.state;
        return (
          <div>
            <InputLanguage
              onChange={context.onChange}
              value={{
                name, i18n
              }}
            />
          </div>
        )
      }
    },
    {
      title: '表单用法',
      description: '与::antd::表单兼容，同时提供了很多内置校验规则方便外部校验。',
      state: {
      },
      getMethod: context => {
        return {
          onSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, value) => {
              console.log(value);
            })
          }
        }
      },
      getContent: context => {
        const { getFieldDecorator } = context.props.form;
        return (
          <div>
            <Form onSubmit={context.onSubmit}>
              <Form.Item label='默认表单'>
                {getFieldDecorator('test1', {

                })(
                  <InputLanguage/>
                )}
              </Form.Item>
              <Form.Item label='必填表单'>
                {getFieldDecorator('test2', {
                  rules: [InputLanguage.required]
                })(
                  <InputLanguage/>
                )}
              </Form.Item>
              <Button htmlType='submit'>提交</Button>
            </Form>
          </div>
        )
      }
    },
  ]
}
